<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加进货记录</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <input type="hidden" :unid="this.getuniddata">
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>食品类型</span>
            <div class="froms">
              <el-radio-group v-model="DemandWarehouse.radio2" size="mini">
                <el-radio :label="0">预包装食品</el-radio>
                <el-radio :label="1">食用农场品</el-radio>
                <el-radio :label="2">散装加工食品</el-radio>
              </el-radio-group>
            </div>
          </li>
          <li>
            <span><em>*</em>食品类别</span>
            <div class="froms">
              <el-select v-model="DemandWarehouse.Foodtype" placeholder="请选择食品类别" name="Foodtype" v-validate="'required'" :class="{'is-danger': errors.has('Foodtype')}">
                <el-option v-for="item in DemandType" :key="item.unid" :value="item.id" :label="item.name">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span><em></em>食品名称</span>
            <div class="froms">
              <input type="button" class="text_l" @click="DemandWarehousehandleClick" v-model="DemandWarehouse.Name">
            </div>
            <mt-popup v-model="DemandWarehouseNamepup" position="right" modal=false class="mint-popup-3">
              <header class="head">
                <a class="back tl" @click="clickmodl">
                  <i class="el-icon-arrow-left"></i>
                </a>
                <a href="javascript:;" class="tc">
                  <small class="font_18 co_f">食品名称</small>
                </a>
              </header>
              <main>
                <div class="seachfrom">
                  <div class="seachbox">
                    <el-input placeholder="请输入内容" v-model="seachtext">
                      <el-button slot="append" icon="search" @click='seach()'></el-button>
                    </el-input>
                  </div>
                </div>
                <div>
                  <ul class="datalist">
                    <li v-for='(item,index) of getPerson' :foodunid='item.demandType.unid' :foodname="item.name" :foodbrand="item.brand" :foodnorms="item.norms" @click="foodClick(item.name,item.brand,item.norms,item.producers,item.demandType.unid)">
                      <div class="items-img">
                        <img src="../../assets/iconimg.png" />
                      </div>
                      <div class="items-text">
                        <p>{{item.brand}}</p>
                        <p>名称{{item.name}}</p>
                        <p>类别：{{item.demandType.name}}</p>
                        <p>规格：{{item.norms}}</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </main>
            </mt-popup>
          </li>
          <li v-if="DemandWarehouse.radio2 ===1||DemandWarehouse.radio2 ===0">
            <span><em>*</em>品牌</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Brand" name="Brand" v-validate="'required'" :class="{'is-danger': errors.has('Brand')}">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0">
            <span><em>*</em>规格净含量</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Norms" name="Norms" v-validate="'required'" :class="{'is-danger': errors.has('Norms')}">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2 ===2">
            <span>生产日期批号</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.dataValue" @click="openPicker()">
              </el-input>
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCancel" @confirm="handleConfirm"></mt-datetime-picker>
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2 ===2">
            <span>有效期限</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.DeadlineDate" @click="openPickerDeadlineDate()">
              </el-input>
              <mt-datetime-picker ref="picker3" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueDeadlineDate" @cancel="handleCancelDeadlineDate" @confirm="handleConfirmDeadlineDate"></mt-datetime-picker>
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2 ===2">
            <span><em>*</em>生产商</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Producers" name="Producers" v-validate="'required'" :class="{'is-danger': errors.has('Producers')}">
            </div>
          </li>
          <li>
            <span><em>*</em>供应商</span>
            <div class="froms">
              <el-select v-model="DemandWarehouseSupplier" placeholder="请选择" name="DemandWarehouseSupplier" v-validate="'required'" :class="{'is-danger': errors.has('DemandWarehouseSupplier')}">
                <el-option v-for="item in Supplierlist" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span><em>*</em>进库数量</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Num"  name="Num" v-validate="'required'" :class="{'is-danger': errors.has('Num')}">
            </div>
          </li>
          <li>
            <span><em>*</em>数量单位</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Unit"  name="Unit" v-validate="'required'" :class="{'is-danger': errors.has('Unit')}">
            </div>
          </li>
          <li>
            <span>进货日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.dataValue2" @click="openPickerStockDate()">
              </el-input>
              <mt-datetime-picker ref="picker2" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueStockDate" @cancel="handleCancelStockDate" @confirm="handleConfirmStockDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span><em>*</em>记录人员</span>
            <div class="froms">
              <input type="" v-model="DemandWarehouse.RecordPersonName" disabled>
            </div>
          </li>
          <li>
            <span><em>*</em>记录时间</span>
            <div class="froms">
              {{this.DemandWarehouse.datatime|time}}
            </div>
          </li>
        </ul>
        <app-upload :getuniddata="imgData.getuniddata" :UserUnid="imgData.UserUnid" :AliasData="imgData.AliasData" :AliasDataSort="imgData.AliasDataSort" :uploadmsg="imgData.uploadmsg" :no="imgData.no"></app-upload>
      </div>
  
    </main>
  </div>
</template>

<script>
  import AppUpload from '@/components/upload'
  import {
    DemandTypeBind,
    DemandWarehouse,
    DemandCertificateAdd //食品类别,根据传入的条件获取原料数据列表//进货记录添加
  } from '../../api/api';
  import {
    GetGuid
  } from '../../api/api';
  import {
    CEKeep
  } from '../../api/api'; //供应商
  import {
    UploadSingleFile,
    FileData,
    DeleteFile,
  } from '../../api/api';
  import {
    DatetimePicker
  } from 'mint-ui';
  import {
    Popup
  } from 'mint-ui';
  var moment = require('moment');
  import Exif from 'exif-js';
  export default {
    name: 'add_mrcj',
    components: {
      'mt-datetime-picker': DatetimePicker,
      'mt-popup': Popup,
      'app-upload': AppUpload,
    },
    data() {
      return {
        popupVisible: false,
        DemandWarehouseNamepup: false,
        DemandType: [],
        pickerValue: moment().format('YYYY-MM-DD'),
        pickerValueStockDate: moment().format('YYYY-MM-DD'),
        pickerValueDeadlineDate: moment().format('YYYY-MM-DD'),
        startDate: new Date(),
        CriteriaList: [],
        getPerson: [],
        Supplierlist: [], //供应商
        DemandWarehouseSupplier: '',
        //表单
        DemandWarehouse: {
          radio2: 0,
          Foodtype: '',
          Name: '请选择食品名称',
          Brand: '',
          Foodunid: '',
          Norms: '',
          Num: '',
          Producers: '',
          Unit: '',
          RecordPersonName: JSON.parse(localStorage.getItem('auth')).enterpriseName,
          dataValue: '',
          dataValue2: '',
          DeadlineDate: '',
          datatime: this.datatime(),
        },
  
        msg: '请选择食品名称',
        isShow: true,
        isActive: false,
        seachtext: '',
        //上传图片
        headerImage: '',
        picValue: '',
        //unidoption:'',
        getuniddata: '',
        FileDatalist: [],
        imgData: {
          getuniddata: '',
          UserUnid: '',
          AliasData: '',
          AliasDataSort: '',
          uploadmsg: '上传购票票据，食品合格证明文件',
          no: true
        }
      };
    },
    methods: {
      //获取32unid
      getunid: function() {
        //调取接口
        this.imgData.UserUnid = JSON.parse(localStorage.getItem('auth')).UserUnid;
        GetGuid().then((res) => {
          if (res.success === true) {
            this.imgData.getuniddata = res.data;
          }
        })
      },
      //食品类别
      DemandTypeunid: function() {
        let DemandTypeunid = {
          params: {
            enterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid
          }
        }
        DemandTypeBind(DemandTypeunid).then((res) => {
          if (res.success === true) {
            this.DemandType = res.data
          }
        })
      },
      //获取当前时间
      datatime: function() {
        var moment = require('moment');
        var currentdate = moment().format('YYYY-MM-DD hh:mm:ss');
        return currentdate;
      },
      //生产日期时间
      openPicker() {
        this.$refs.picker.open();
      },
      handleCancel() {
        let _this = this
        _this.pickerValue = _this.DemandWarehouse.dataValue
      },
      handleConfirm(val) {
        let _this = this
        _this.DemandWarehouse.dataValue = moment(val).format('YYYY-MM-DD 00:00:00')
      },
      //进货日期
      openPickerStockDate() {
        this.$refs.picker2.open();
      },
      handleCancelStockDate() {
        let _this = this
        _this.pickerValueStockDate = _this.DemandWarehouse.dataValue2
      },
      handleConfirmStockDate(val) {
        let _this = this
        _this.DemandWarehouse.dataValue2 = moment(val).format('YYYY-MM-DD 00:00:00')
      },
      //有效日期
      openPickerDeadlineDate() {
        this.$refs.picker3.open();
      },
      handleCancelDeadlineDate() {
        let _this = this
        _this.pickerValueDeadlineDate = _this.DemandWarehouse.DeadlineDate
      },
      handleConfirmDeadlineDate(val) {
        let _this = this
        _this.DemandWarehouse.DeadlineDate = moment(val).format('YYYY-MM-DD 00:00:00')
      },
      //食品名称开始了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      foodClick: function(foodname, foodbrand, foodnorms, producers, foodunid) {
        this.DemandWarehouse.Name = foodname;
        this.DemandWarehouse.Brand = foodbrand;
        this.DemandWarehouse.Norms = foodnorms;
        this.DemandWarehouse.Producers = producers
        this.DemandWarehouse.Foodunid = foodunid
        this.clickmodl();
      },
      seach: function() {
        this.listData = [];
        this.CriteriaList[0] = {
          Name: 'Name',
          Value: '%' + this.seachtext + '%',
          Operate: 'Like',
          DataType: null,
          EndSuffix: '',
          Suffix: null
        };
        this.CriteriaList[1] = {
          Name: 'DemandType.Name',
          Value: '%' + this.seachtext + '%',
          Operate: 'Like',
          DataType: null,
          EndSuffix: '',
          Suffix: null
        };
  
        this.DemandWarehouseinfo();
      },
      //弹窗
      DemandWarehousehandleClick: function() {
        this.DemandWarehouseNamepup = true
        this.DemandWarehouseinfo();
      },
      clickmodl: function() {
        this.DemandWarehouseNamepup = false
      },
      //获取item
      peopleClick: function(unid, name) {
        this.institutionPersonname = name;
        this.institutionPersonunid = unid;
        this.clickmodl();
        this.msg = this.institutionPersonname
      },
      DemandWarehouseinfo: function() {
        if (this.DemandWarehouse.Foodtype != 0) {
          this.CriteriaList[0] = {
            Name: 'DemandType.Unid',
            Value: this.DemandWarehouse.Foodtype,
            Operate: 'Equal',
            DataType: null,
            EndSuffix: '',
            Suffix: null
          }
        }
        let varQueryData = {
          PageSize: 100,
          CurrentPage: 1,
          Query: {
            CriteriaList: this.CriteriaList
          }
        }
        let options = {
          params: {
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            QueryData: JSON.stringify(varQueryData)
          }
        }
        //调取接口
        DemandWarehouse(options).then((res) => {
          if (res.success === true) {
            this.user = res.data.user;
            this.getPerson = res.data;
          }
        })
      },
      //食品名称结束了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      //获取供应商开始了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Supplier: function() {
        let CEKeepunid = {
          params: {
            userUnid: JSON.parse(localStorage.getItem('auth')).UserUnid
          }
        }
        CEKeep(CEKeepunid).then((res) => {
          if (res.success === true) {
            this.Supplierlist = res.data
          }
        })
      },
      //获取供应商结束了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      //提交方法
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let varDemandWarehouse = {
              DemandType: {
                Unid: this.DemandWarehouse.Foodunid,
              },
              Name: this.DemandWarehouse.Name,
            }
            let varSupper = {
              Unid: this.DemandWarehouseSupplier,
              //  SupplierName:this.DemandWarehouseSupplier.label
            }
            let varEnterpriseUnid = {
              Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
              Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
            }
            let data = {
              Unid: this.imgData.getuniddata,
              Type: this.DemandWarehouse.radio2,
              DemandWarehouse: varDemandWarehouse,
              Brand: this.DemandWarehouse.Brand,
              Norms: this.DemandWarehouse.Norms,
              ProductionDate: this.DemandWarehouse.dataValue,
              DeadlineDate: this.DemandWarehouse.DeadlineDate,
              Producers: this.DemandWarehouse.Producers,
              Supplier: varSupper,
              Num: this.DemandWarehouse.Num,
              Unit: this.DemandWarehouse.Unit,
              StockDate: this.DemandWarehouse.dataValue2,
              RecordPersonName: JSON.parse(localStorage.getItem('auth')).enterpriseName,
              RecordPersonUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
              RecordDate: this.DemandWarehouse.datatime,
              Enterprise: varEnterpriseUnid,
              EnterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            DemandCertificateAdd(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
          } else {
debugger
            this.$message.error('带*号为必填项，请确认填写格式正确');
            
          }
        })
      }
    },
    mounted() {
      this.getunid();
      this.DemandTypeunid();
      this.Supplier();
    }
  
  }
</script>

<style lang="scss">
  .uploadbox {
    position: relative;
    margin: 20px 0px;
    padding-left: 10px
  }
  
  .img-btnbox {
    position: absolute;
    right: 10px;
    top: -5px;
    width: 25px;
    height: 25px;
    overflow: hidden;
  }
  
  .showclick {
    position: relative;
    cursor: pointer;
    color: #888;
    background: url("../../img/add.png") no-repeat;
    background-size: contain;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    input {
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer;
      width: 100%;
      height: 100%;
    }
  }
  
  .el-radio__label {
    margin-top: 2px;
  }
  
  .disabled {
    display: none !important
  }
  
  .el-message {
    width: 85%;
    margin: 20px auto;
  }
  
  //重构
  .items-text {
    p {
      margin: 0em !important;
      padding: 0em !important;
      line-height: 20px;
    }
  }
</style>
